﻿@{
    
    var sanpham = (Model.Object.SanPham)ViewBag.sanpham;
    var sanphamnext = (Model.Object.SanPham)ViewBag.sanphamnext;
    var loai = (Model.Object.LoaiSanPham)ViewBag.loai;
    var hinhanh=(List<Model.Object.HinhAnh>)ViewBag.hinhanh;
    Layout = "~/Views/Shared/_LayoutWebmini.cshtml"; 
}

<!-- breadcrumbs BOF -->

<div class="breadcrumbs">
    <ul>
        <li class="home">
            <a href="@Url.Action("Index","Home")" title="Tới trang chủ">Trang chủ</a>
            <span></span>
        </li>
        <li class="product">
            <strong>@sanpham.Ten</strong>
        </li>
    </ul>
</div>
<!-- breadcrumbs EOF -->
<div class="col-main">

    <div class="prev-next clearfix">
        <a rel="next" class="product-next" title="#"><span>next</span></a>
    </div>
    <div class="product-category-title">@loai.Ten_Loai</div>
    <script type="text/javascript">
        var optionsPrice = new Product.OptionsPrice([]);
    </script>
    <div id="messages_product_view"></div>
    <div class="product-view">
        <div class="product-essential">
            <form action="#" method="post" id="product_addtocart_form">
                <div class="no-display">
                    <input type="hidden" name="product" value="@sanpham.ID" />
                    <input type="hidden" name="related_product" id="related-products-field" value="" />
                </div>

                <div class="product-img-box" style="width: 378px">




                    <p class="product-image">
                        <a href="@hinhanh[0].ImagePath" class="cloud-zoom" id="cloud_zoom" rel="position:'right',showTitle:false,lensOpacity:0.5,smoothMove:3">
                            <img src="@hinhanh[0].ImagePath" data-srcx2="@hinhanh[0].ImagePath" alt="@sanpham.Ten" title="@sanpham.Ten" width="360" height="360" />
                        </a>
                    </p>


                    <div class="more-views">
                        <ul id="shopper_gallery_carousel" class="jcarousel-skin-tango clearfix">
                            @foreach(var h in hinhanh){
                            <li>
                                <a href='@h.ImagePath' class='cloud-zoom-gallery' title=''
                                    rel="useZoom: 'cloud_zoom', smallImage: '@h.ImagePath' ">
                                    <img src="@h.ImagePath" data-srcx2="@h.ImagePath" width="81" height="81" alt="" />
                                </a>
                            </li>
                            }
                        </ul>
                        <div class="jcarousel-controls">
                            <a href="#" class="jcarousel-prev-horizontal" id="shopper_gallery_prev"></a>
                            <a href="#" class="jcarousel-next-horizontal" id="shopper_gallery_next"></a>
                        </div>
                    </div>
                    <script type="text/javascript">
                        jQuery(document).ready(function ($) {

                            myCarousel = null; // This will be the carousel object

                            function mycarousel_initCallback(carousel, state) {
                                if (state == 'init') {
                                    myCarousel = carousel;
                                }
                                $('#shopper_gallery_next').bind('click', function () {
                                    carousel.next();
                                    return false;
                                });
                                $('#shopper_gallery_prev').bind('click', function () {
                                    carousel.prev();
                                    return false;
                                });

                                $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-container-horizontal').width(267);
                                $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-clip-horizontal').width(267);
                                $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-item').width(81);
                                $('#shopper_gallery_prev, #shopper_gallery_next').css({ marginTop: -57.5 });

                            };

                            $('#shopper_gallery_carousel').jcarousel({
                                scroll: 1,
                                initCallback: mycarousel_initCallback,
                                buttonNextHTML: null,
                                buttonPrevHTML: null
                            });

                            $(window).resize(function () {
                                var n = $('#shopper_gallery_carousel > li').length;
                                var w = $('#shopper_gallery_carousel > li').outerWidth(true);
                                $('#shopper_gallery_carousel').width(n * w);
                                myCarousel.scroll(0);
                            });

                            $('.mousetrap').live('click', function () {
                                var images = [];
                                images.push($('#cloud_zoom').attr('href'));
                                $('a.cloud-zoom-gallery').each(function () {
                                    images.push($(this).attr('href'));
                                });

                                $.fancybox(
                                    images,
                                    {
                                        'padding': 0,
                                        'transitionIn': 'none',
                                        'transitionOut': 'none',
                                        'type': 'image',
                                        'changeFade': 0
                                    }
                                );
                                return false;
                            });

                        });
                    </script>
                </div>

                <div class="product-shop">
                    <div class="product-additional">
                        <div class="block block-product-additional">
                            <a href="">
                                <img src="@Url.Content("~/media/wysiwyg/sideweb_1_.jpg")" alt="" /></a>
                        </div>
                    </div>
                    <div class="product-shop-info">
                        <div class="product-name">
                            <h1>@sanpham.Ten</h1>
                        </div>
                        <p class="no-rating"><a href="">Hãy là khách hàng đầu tiên nhận xét sản phẩm này</a></p>





                        <div class="price-box">
                            <span class="regular-price" id="product-price-3327">
                                
                                <span class="price">@sanpham.Gia đ</span>
                                <span class="unit-price">/@sanpham.Don_vi_tinh</span>    
                            </span>

                        </div>

                        <p class="availability in-stock"><span>Còn hàng</span></p>
                        <p class="sku">SKU: <span>1820081</span></p>

                        <div class="clear"></div>

                        <div class="short-description">
                            <div class="std">
                                 @Html.Raw(HttpUtility.HtmlDecode(sanpham.Chi_tiet))
                              
                            </div>
                        </div>


                        <div class="qty-container clearfix">
                            <label for="qty">SL:</label>
                            <input type="text" name="qty" id="txtqty_@sanpham.ID" maxlength="12" value="1" title="SL" class="input-text qty" />
                        </div>

                        <div class="add-to-box">
                            <div class="add-to-cart">
                                <button type="button" title="Thêm vào giỏ" class="button btn-cart" onclick="javascript: getspwithqtycapnhat(@sanpham.ID);"><span><span>Thêm vào giỏ</span></span></button>
                            </div>
                        </div>


                        <div id="fb-root"></div>
                        <script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "http://connect.facebook.net/vi_VN/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clearer"></div>
            </form>
            <script type="text/javascript">
                //<![CDATA[


                function setAjaxData(data, iframe) {
                    //showMessage(data.message);
                    if (data.status != 'ERROR' && jQuery('.cart-top-container').length) {
                        jQuery('.cart-top-container').replaceWith(data.cart_top);
                    }
                }

                function showMessage(message) {
                    jQuery('body').append('<div class="alert"></div>');
                    var $alert = jQuery('.alert');
                    $alert.slideDown(400);
                    $alert.html(message).append('<button></button>');
                    jQuery('button').click(function () {
                        $alert.slideUp(400);
                    });
                    $alert.slideDown('400', function () {
                        setTimeout(function () {
                            $alert.slideUp('400', function () {
                                jQuery(this).slideUp(400, function () { jQuery(this).detach(); })
                            });
                        }, 7000)
                    });
                }

                var productAddToCartForm = new VarienForm('product_addtocart_form');
                productAddToCartForm.submit = function (button, url) {
                    if (this.validator.validate()) {
                        var form = this.form;
                        var oldUrl = form.action;
                        if (url) {
                            form.action = url;
                        }
                        var e = null;
                        // Start of our new ajax code
                        if (!url) {
                            url = jQuery('#product_addtocart_form').attr('action');
                        }
                        url = url.replace("checkout/cart", "ajax/index"); // New Code
                        var data = jQuery('#product_addtocart_form').serialize();
                        data += '&isAjax=1';
                        jQuery('#ajax_loading' + jQuery('#product_addtocart_form').find("[name='product']").val()).css('display', 'block');
                        try {
                            jQuery.ajax({
                                url: url,
                                dataType: 'jsonp',
                                type: 'post',
                                data: data,
                                success: function (data) {
                                    jQuery('#ajax_loading' + jQuery('#product_addtocart_form').find("[name='product']").val()).css('display', 'none');
                                    setAjaxData(data, true);
                                    showMessage(data.message);
                                }
                            });
                        } catch (e) {
                        }
                        // End of our new ajax code
                        this.form.action = oldUrl;

                        if (e) {
                            throw e;
                        }
                    }
                }.bind(productAddToCartForm);


                productAddToCartForm.submitLight = function (button, url) {
                    if (this.validator) {
                        var nv = Validation.methods;
                        delete Validation.methods['required-entry'];
                        delete Validation.methods['validate-one-required'];
                        delete Validation.methods['validate-one-required-by-name'];
                        if (this.validator.validate()) {
                            if (url) {
                                this.form.action = url;
                            }
                            this.form.submit();
                        }
                        Object.extend(Validation.methods, nv);
                    }
                }.bind(productAddToCartForm);
                //]]>
            </script>
        </div>

        <!-- ADDITIONAL -->
        <ul class="product-tabs">
            <li id="product_tabs_description_tabbed" class=" active first"><a href="#">Chi tiết</a></li>
            <li id="product_tabs_review_tabbed" class=" last"><a href="#">Đánh giá</a></li>
        </ul>
        <div class="product-tabs-content tabs-content" id="product_tabs_description_tabbed_contents">
            <h2>Chi tiết</h2>
            <div class="std">
               @Html.Raw(HttpUtility.HtmlDecode(sanpham.Chi_tiet))
            </div>
        </div>
        <div class="product-tabs-content tabs-content" id="product_tabs_review_tabbed_contents">
            <div class="collateral-box dedicated-review-box" id="product-customer-reviews">
                <ol>
                    <li>Hãy là khách hàng đầu tiên nhận xét sản phẩm này</li>
                </ol>
            </div>

            <div class="add-review">
                <div class="form-add">
                    <h2>Lưu lại nhận xét riêng của bạn</h2>
                    <form action="http://www.nongsanngon.com.vn/review/product/post/id/3327/" method="post" id="review-form">
                        <fieldset>
                            <h3 style="margin-bottom: 10px;">Bạn đánh giá sản phẩm:  <span>Bánh ăn dặm hữu cơ Gerber dạng bánh xe vị táo</span> như thế nào ?</h3>
                            <span id="input-message-box"></span>
                            <table class="data-table" id="product-review-table">
                                <col />
                                <col width="1" />
                                <col width="1" />
                                <col width="1" />
                                <col width="1" />
                                <col width="1" />
                                <thead>
                                    <tr>
                                        <th>&nbsp;</th>
                                        <th><span class="nobr">Chán</span></th>
                                        <th><span class="nobr">Không thích</span></th>
                                        <th><span class="nobr">Tạm được</span></th>
                                        <th><span class="nobr">Yêu thích</span></th>
                                        <th><span class="nobr">Miễn chê</span></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>Price</th>
                                        <td class="value">
                                            <input type="radio" name="ratings[3]" id="Price_1" value="11" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[3]" id="Price_2" value="12" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[3]" id="Price_3" value="13" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[3]" id="Price_4" value="14" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[3]" id="Price_5" value="15" class="radio" /></td>
                                    </tr>
                                    <tr>
                                        <th>Value</th>
                                        <td class="value">
                                            <input type="radio" name="ratings[2]" id="Value_1" value="6" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[2]" id="Value_2" value="7" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[2]" id="Value_3" value="8" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[2]" id="Value_4" value="9" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[2]" id="Value_5" value="10" class="radio" /></td>
                                    </tr>
                                    <tr>
                                        <th>Quality</th>
                                        <td class="value">
                                            <input type="radio" name="ratings[1]" id="Quality_1" value="1" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[1]" id="Quality_2" value="2" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[1]" id="Quality_3" value="3" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[1]" id="Quality_4" value="4" class="radio" /></td>
                                        <td class="value">
                                            <input type="radio" name="ratings[1]" id="Quality_5" value="5" class="radio" /></td>
                                    </tr>
                                </tbody>
                            </table>
                            <input type="hidden" name="validate_rating" class="validate-rating" value="" />
                            <script type="text/javascript">decorateTable('product-review-table')</script>
                            <ul class="form-list">
                                <li>
                                    <label for="nickname_field" class="required"><em>*</em>Tên bạn</label>
                                    <div class="input-box">
                                        <input type="text" name="nickname" id="nickname_field" class="input-text required-entry" value="" />
                                    </div>
                                </li>
                                <li>
                                    <label for="summary_field">Số điện thoại</label>
                                    <div class="input-box">
                                        <input type="text" name="title" id="summary_field" class="input-text required-entry" value="" />
                                    </div>
                                </li>
                                <li>
                                    <label for="review_field">Nhận xét</label>
                                    <div class="input-box">
                                        <textarea name="detail" id="review_field" cols="5" rows="3"></textarea>
                                    </div>
                                </li>
                            </ul>
                        </fieldset>
                        <div class="buttons-set">
                            <button type="submit" title="Lưu nhận xét" class="button"><span><span>Lưu nhận xét</span></span></button>
                        </div>
                    </form>
                    <script type="text/javascript">
                        //<![CDATA[
                        var dataForm = new VarienForm('review-form');
                        Validation.addAllThese(
                        [
                               ['validate-rating', 'Vui lòng chọn một trong số các định mức đánh giá trên đây', function (v) {
                                   var trs = $('product-review-table').select('tr');
                                   var inputs;
                                   var error = 1;

                                   for (var j = 0; j < trs.length; j++) {
                                       var tr = trs[j];
                                       if (j > 0) {
                                           inputs = tr.select('input');

                                           for (i in inputs) {
                                               if (inputs[i].checked == true) {
                                                   error = 0;
                                               }
                                           }

                                           if (error == 1) {
                                               return false;
                                           } else {
                                               error = 1;
                                           }
                                       }
                                   }
                                   return true;
                               }]
                        ]
                        );
                        //]]>
                    </script>
                </div>
            </div>

        </div>

        @*<div class="product-tabs-accordion clearfix">
            <h2 id="product_acc_description_tabbed" class="tab-heading  active "><a href="#">Chi tiết</a></h2>
            <div class="product-tabs-content accordion-content">
                <h2>Chi tiết</h2>
                <div class="std">
                    <p>
                        B&aacute;nh ăn dặm hữu cơ Gerber được sản xuất từ ng&ocirc; nguy&ecirc;n hạt, c&oacute; chứng nhận bởi tổ chức USDA l&agrave; nguồn cung cấp c&aacute;c loại vitamin, sắt v&agrave; kẽm cho b&eacute;.<br />
                        D&agrave;nh cho b&eacute; đ&atilde; biết b&ograve;, đang tập cầm nắm v&agrave; ăn dặm.
                    </p>
                    <p>
                        Bảo quản: ở nơi tho&aacute;ng m&aacute;t<br />
                        Trọng lượng tịnh : 42gr
                    </p>
                </div>
            </div>
            <h2 id="product_acc_review_tabbed" class="tab-heading "><a href="#">Đánh giá</a></h2>
            <div class="product-tabs-content accordion-content">
                <div class="collateral-box dedicated-review-box" id="product-customer-reviews">
                    <ol>
                        <li>Hãy là khách hàng đầu tiên nhận xét sản phẩm này</li>
                    </ol>
                </div>

                <div class="add-review">
                    <div class="form-add">
                        <h2>Lưu lại nhận xét riêng của bạn</h2>
                        <form action="http://www.nongsanngon.com.vn/review/product/post/id/3327/" method="post" id="review-form">
                            <fieldset>
                                <h3 style="margin-bottom: 10px;">Bạn đánh giá sản phẩm:  <span>Bánh ăn dặm hữu cơ Gerber dạng bánh xe vị táo</span> như thế nào ?</h3>
                                <span id="input-message-box"></span>
                                <table class="data-table" id="product-review-table">
                                    <col />
                                    <col width="1" />
                                    <col width="1" />
                                    <col width="1" />
                                    <col width="1" />
                                    <col width="1" />
                                    <thead>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th><span class="nobr">Chán</span></th>
                                            <th><span class="nobr">Không thích</span></th>
                                            <th><span class="nobr">Tạm được</span></th>
                                            <th><span class="nobr">Yêu thích</span></th>
                                            <th><span class="nobr">Miễn chê</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>Price</th>
                                            <td class="value">
                                                <input type="radio" name="ratings[3]" id="Price_1" value="11" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[3]" id="Price_2" value="12" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[3]" id="Price_3" value="13" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[3]" id="Price_4" value="14" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[3]" id="Price_5" value="15" class="radio" /></td>
                                        </tr>
                                        <tr>
                                            <th>Value</th>
                                            <td class="value">
                                                <input type="radio" name="ratings[2]" id="Value_1" value="6" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[2]" id="Value_2" value="7" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[2]" id="Value_3" value="8" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[2]" id="Value_4" value="9" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[2]" id="Value_5" value="10" class="radio" /></td>
                                        </tr>
                                        <tr>
                                            <th>Quality</th>
                                            <td class="value">
                                                <input type="radio" name="ratings[1]" id="Quality_1" value="1" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[1]" id="Quality_2" value="2" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[1]" id="Quality_3" value="3" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[1]" id="Quality_4" value="4" class="radio" /></td>
                                            <td class="value">
                                                <input type="radio" name="ratings[1]" id="Quality_5" value="5" class="radio" /></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <input type="hidden" name="validate_rating" class="validate-rating" value="" />
                                <script type="text/javascript">decorateTable('product-review-table')</script>
                                <ul class="form-list">
                                    <li>
                                        <label for="nickname_field" class="required"><em>*</em>Tên bạn</label>
                                        <div class="input-box">
                                            <input type="text" name="nickname" id="nickname_field" class="input-text required-entry" value="" />
                                        </div>
                                    </li>
                                    <li>
                                        <label for="summary_field">Số điện thoại</label>
                                        <div class="input-box">
                                            <input type="text" name="title" id="summary_field" class="input-text required-entry" value="" />
                                        </div>
                                    </li>
                                    <li>
                                        <label for="review_field">Nhận xét</label>
                                        <div class="input-box">
                                            <textarea name="detail" id="review_field" cols="5" rows="3"></textarea>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>
                            <div class="buttons-set">
                                <button type="submit" title="Lưu nhận xét" class="button"><span><span>Lưu nhận xét</span></span></button>
                            </div>
                        </form>
                        <script type="text/javascript">
                            //<![CDATA[
                            var dataForm = new VarienForm('review-form');
                            Validation.addAllThese(
                            [
                                   ['validate-rating', 'Vui lòng chọn một trong số các định mức đánh giá trên đây', function (v) {
                                       var trs = $('product-review-table').select('tr');
                                       var inputs;
                                       var error = 1;

                                       for (var j = 0; j < trs.length; j++) {
                                           var tr = trs[j];
                                           if (j > 0) {
                                               inputs = tr.select('input');

                                               for (i in inputs) {
                                                   if (inputs[i].checked == true) {
                                                       error = 0;
                                                   }
                                               }

                                               if (error == 1) {
                                                   return false;
                                               } else {
                                                   error = 1;
                                               }
                                           }
                                       }
                                       return true;
                                   }]
                            ]
                            );
                            //]]>
                        </script>
                    </div>
                </div>

            </div>
        </div>*@

        <script type="text/javascript">
            //<![CDATA[
            Varien.Tabs = Class.create();
            Varien.Tabs.prototype = {
                initialize: function (selector) {
                    var self = this;
                    $$(selector + ' a').each(this.initTab.bind(this));
                },

                initTab: function (el) {
                    el.href = 'javascript:void(0)';
                    if ($(el.parentNode).hasClassName('active')) {
                        this.showContent(el);
                    }
                    el.observe('click', this.showContent.bind(this, el));
                },

                showContent: function (a) {
                    var li = $(a.parentNode), ul = $(li.parentNode);
                    ul.select('li', 'ol').each(function (el) {
                        var contents = $(el.id + '_contents');
                        if (el == li) {
                            el.addClassName('active');
                            contents.show();
                        } else {
                            el.removeClassName('active');
                            contents.hide();
                        }
                    });
                }
            }
            new Varien.Tabs('.product-tabs');
            //]]>
        </script>
        <!-- ADDITIONAL -->



        <!-- RELATED -->
        <!-- RELATED -->

    </div>

    <script type="text/javascript">
        var lifetime = 3600;
        var expireAt = Mage.Cookies.expires;
        if (lifetime > 0) {
            expireAt = new Date();
            expireAt.setTime(expireAt.getTime() + lifetime * 1000);
        }
        Mage.Cookies.set('external_no_cache', 1, expireAt);
    </script>
</div>

